<template>
	<view style="padding-right: 20rpx;">
		<view style="font-size: 60rpx;margin-top: 30rpx;color: #002fa7;padding-left: 60rpx;">
			验证码登录
		</view>
		<!-- <view style="font-size: 24rpx;margin-top: 30rpx;color: #c4c4c4;padding-left: 60rpx;">
			未注册的手机号登录后将自动注册
		</view> -->
		<!--上部分-->
		<view class="conter">
			<view class="top_in">
				<uni-forms>
					<uni-forms-item>
						<uni-easyinput type="text" v-model="user.phone" placeholder="请输入手机号"  />
					</uni-forms-item>
				</uni-forms>
			</view>
			
			<uni-forms>
				<uni-forms-item>
					<view class="sjh">
						<uni-easyinput type="text" v-model="user.yzm" placeholder="请输入验证码" />
						<button style="font-size: 20rpx; margin-left: 110rpx;" @click="huoqu()" v-if="sta">获取验证码</button>
						<button disabled="false" style="font-size: 20rpx; margin-left: 110rpx;" @click="huoqu()" v-else="sta">重新获取（{{countDown}}）</button>
					</view>
			
				</uni-forms-item>
			</uni-forms>
			<view class="yzm">
				<view class="" @click="zc()">
					密码登录
				</view>
				<view class="" @click="wj()">
					忘记密码?
				</view>
			</view>
			<view class="anniu">
				<button @click="denglu">登录</button>
			</view>
		</view>
		<!--下面部分-->
		<view class="hodler">
			<text>登录/注册即视为你同意&laquo;服务条款&raquo;</text>
		</view>
	</view>
</template>

<script setup>
	//引入存放jwt的容器
	import {
		tokenStore
	} from '@/stores/token';
	//存放用户信息的容器
	import {
		userStore
	} from '@/stores/user';
	//引入容器
	//存放一个变量，控制倒计时
	const countDown = ref(60)
	//定义一个定时器
	let timer = null
	const sta = ref(true)
	const token = tokenStore()
	const u = userStore()
	//引入拦截器
	import '@/config/requst.js'
	import {
		ref
	} from 'vue';
	import {
		http
	} from '@/config/requst.js';
	//定义用户信息
	const user = ref({
		phone: '',
		yzm: ''
	})
	//点击登录按钮执行的事件
	const denglu = () => {
		if (user.value.phone == '') {
			uni.showToast({
				title: '手机号不能为空',
				duration: 2000,
				icon: 'error'
			});
			return;
		}

		if (user.value.yzm == '') {
			uni.showToast({
				title: '验证码不能为空',
				duration: 2000,
				icon: 'error'
			});
			return;
		}

		if (user.value.phone.length > 11 && user.value.phone < 11) {
			uni.showToast({
				title: '请输入11位手机号',
				duration: 2000,
				icon: 'error'
			});
			return;
		}
		if (user.value.yzm.length < 6 && user.value.password > 6) {
			uni.showToast({
				title: '请输入正确的验证码',
				duration: 2000,
				icon: 'error'
			});
			return;
		}
		//调用登录的方法
		lo()
	}
	const wj = () => {
		uni.navigateTo({
			url: '/pages/forget/forget'
		})
	}
	
	//跳转到注册页面
	const zc = () => {
		uni.navigateTo({
			url: '/pages/login/login'
		})
	}
	//获取验证码
	const huoqu = async() => {
		if(user.value.phone == ''){
			uni.showToast({
				title: '手机号不能为空',
				duration: 2000,
				icon: 'error'
			});
			return;
		}
		if (user.value.phone.length < 11 && user.value.phone > 11) {
			uni.showToast({
				title: '请输入11位手机号',
				duration: 2000,
				icon: 'error'
			});
			return;
		}
		const res = await http({
			url: "/user/sendCode/"+user.value.phone,
		})
		if(res!==null){
			uni.showToast({
				title: '验证码已发送',
				duration: 2000,
				icon: 'success'
			});
			sta.value = false
			timer = setInterval(() => {
				countDown.value--
				if (countDown.value <= 0) {
					clearInterval(timer)
					sta.value = true
					countDown.value = 60
				}
			}, 1000)
		}
		console.log(res)
	}
	//登录向后端发送异步请求
	const lo = async () => {
		//发送登录请求
		const res = await http({
			url: "/user/code",
			method: 'POST',
			data: user.value
		})
		if (res.code == 20041) {
			uni.showToast({
				title: '登录成功',
				duration: 2000,
			});
			//将后端传输过来的token存到容器中
			token.setToken(res.shuju.token)
			//将后端传输过来的用户信息存到容器中
			u.setUser(res.shuju.duixiang)
			//跳转到首页
			uni.switchTab({
				url: '/pages/Search/Search'
			})
		} else {
			uni.showToast({
				title: res.msg,
				duration: 2000,
				icon: 'error'
			});
		}
	}
</script>

<style lang="scss">
	.conter {
		display: flex;
		flex-direction: column; //主轴为y轴
		align-items: center; //交叉轴的位置
		justify-content: flex-start; // 主轴的位置
		height: 1000rpx;
		margin-top: 50rpx;
		width: 100%;
		.sjh {
			display: flex;
		
			justify-content: space-around;
		
			.sjh .uni-easyinput {
				width: 100rpx;
			}
		}
		.wenben input {
			width: 580rpx;
			height: 70rpx;
			border: 1px solid #cccccc;
			margin-top: 30rpx;
			margin-bottom: 30rpx;
			border-radius: 35rpx;
			//padding-left: 20rpx;
		}

		.anniu button {
			margin-top: 50rpx;
			width: 600rpx;
			height: 90rpx;
			background-color: #002fa7;
			//border-radius: 45rpx;
			color: #fff;
		}

		.top_in .uni-easyinput {
			width: 580rpx;
		}

		.yzm {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			width: 580rpx;
			margin-top: 30rpx;
			font-size: 24rpx;
			color: #002fa7;
		}
	}

	.hodler {
		text-align: center;
		color: #cccccc;
		font-size: 25rpx;
	}
</style>